<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://unpkg.com/vue@next"></script>
<body>
    <div id="root"></div>    
</body>
<script>
    const app = Vue.createApp({
     data() {
         return {
            list: ["dell", "lee", "hello"],
            listObject: {
                firtsrName:'dell',
                lastName: 'lee',
                age:'20'
            }
         }
     },
     methods: {
         handlerClick() {
             // 数组变更函数 push pop shift unshift splice sort reverse
            //  this.list.push('hello');
            //  this.list.unshift('hello'); // 从上面添加
            // this.list.shift('hello'); // 从上面删除
            // this.list.pop('hello'); // 从下面删除
            // 2 直接替换数组
            this.list = ['','']

            // 3 直接更新数组内容
            this.list[1] = 'good'

            // 直接添加对象内容
            this.listObject.sex = 'male';
         }
     },
     template: `
        <div >
            <div v-for="(item, index) of list" :key="index">
                {{item}}    
            </div>    
            <button @click="handlerClick">添加</button>
            <template v-for="(value,key, index) of listObject"
                :key="index"
            >
                <div v-if="key !== 'lastName'">
                    {{value}} -- {{key}}   
                </div>    
            </template> 
            
        </div>
     `
    })

    const vm = app.mount('#root')
 </script>
</html>

<!-- 
循环优先级高于v-if

使用template占位

 -->